<template>
    <div class="drawer">
      <div class="drawer-title">
        <span>签到情况</span>
        <a-icon class="close-icon" type="close" @click="handleDrawer" />
      </div>
      <div class="drawer-body">
        <a-space>
          <a-select default-value="2020" style="width: 120px" @change="changeDate">
            <a-select-option value="2020"> 2020年 </a-select-option>
            <a-select-option value="2021"> 2021年 </a-select-option>
            <a-select-option value="2022"> 2022年 </a-select-option>
          </a-select>
          <a-select default-value="01" style="width: 120px">
            <a-select-option value="01"> 1月 </a-select-option>
            <a-select-option value="02"> 2月 </a-select-option>
            <a-select-option value="03"> 3月 </a-select-option>
            <a-select-option value="04"> 4月 </a-select-option>
            <a-select-option value="05"> 5月 </a-select-option>
            <a-select-option value="06"> 6月 </a-select-option>
            <a-select-option value="07"> 7月 </a-select-option>
            <a-select-option value="08"> 8月 </a-select-option>
            <a-select-option value="09"> 9月 </a-select-option>
            <a-select-option value="10"> 10月 </a-select-option>
            <a-select-option value="11"> 11月 </a-select-option>
            <a-select-option value="12"> 12月 </a-select-option>
          </a-select>
        </a-space>
        <h3>签到统计</h3>
        <a-list item-layout="vertical" :data-source="data" :grid="{ column:2, gutter: 48 }">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-icon slot="extra" :type="item.iconType" style="font-size: 40px;color: #2b7cd9;" />
            <a-list-item-meta :description="item.description">
              <h5 slot="title">{{ item.title }}</h5>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
        <h3 style="position: relative;">假勤统计<a style="position: absolute;right: 0;">查看详情</a></h3>
        <a-list :data-source="datat">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <template slot="actions"> 1次 </template>
            <a-list-item-meta :title="item.title" />
          </a-list-item>
        </a-list>
        <h3>签到日历</h3>
        <div class="con-content-list">
          <a-space style="margin-bottom: 20px;">
            <a-badge color="#ccc" text="未签到" />
            <a-badge color="blue" text="已签到" />
            <a-badge color="gold" text="已请假" />
          </a-space>
          <a-calendar v-model="calendarValue" :header-render="headerRender" @change="rangePickerChange">
            <ul slot="dateCellRender" slot-scope="value" class="events">
              <li v-for="(item, index) in getListData(value)" :key="index">
                <a-tooltip :title="item.content">
                  <a-badge v-if="item.type !== 'error'" :status="item.type" :class="'ant-badge-text-' + item.type" />
                  <div class="hand-status" v-else>
                    <p>{{ item.content }}</p>
                    <!-- <img src="~@/assets/hand.svg" alt="dark" /> -->
                  </div>
                </a-tooltip>
              </li>
            </ul>
          </a-calendar>
          <div v-if="isShowsignInDel">
            <h4 style="font-weight: bold;">签到详情</h4>
            <p>
              <span class="strong">签到情况：</span><span>{{ signInDel }}</span>
            </p>
            <p>
              <span class="strong">签到时间：</span><span>{{ signInTime ? signInTime : '无' }}</span>
            </p>
            <p>
              <span class="strong">签到地点：</span><a>{{ signInPlace ? signInPlace : '无' }}</a>
            </p>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      calendarValue: '',
      SignInData: [
        {
          signDate: '2022-09-30',
          signTime: '2022-09-30 03:55:49',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '6',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-29',
          signTime: '2022-09-29 03:18:40',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '5',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-28',
          signTime: '2022-09-28 14:17:25',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '4',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-27',
          signTime: '2022-09-27 03:20:18',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '3',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-26',
          signTime: '2022-09-26 03:18:28',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '2',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-25',
          signTime: '2022-09-25 16:42:51',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '1',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-24',
          signTime: '2022-09-24 13:55:38',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '7',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-23',
          signTime: '2022-09-23 15:06:27',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '6',
          status: '0',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-22',
          signTime: '2022-09-22 14:34:16',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '5',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-21',
          signTime: '2022-09-21 18:17:37',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '4',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-20',
          signTime: '2022-09-20 12:54:41',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '3',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-19',
          signTime: '2022-09-19 14:42:22',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '2',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-18',
          signTime: '2022-09-18 00:56:52',
          signPlace: '海南省海南省屯昌县屯昌县综合批发市场',
          weed: '1',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-17',
          signTime: '2022-09-17 16:07:43',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '7',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-16',
          signTime: '2022-09-16 12:53:57',
          signPlace: '海南省海南省屯昌县屯昌县屯城镇屯郊卫生院',
          weed: '6',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-15',
          signTime: '2022-09-15 14:01:10',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '5',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-14',
          signTime: '2022-09-14 03:04:18',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '4',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-13',
          signTime: '2022-09-13 03:32:52',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '3',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-12',
          signTime: '2022-09-12 04:49:07',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '2',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-11',
          signTime: '2022-09-11 13:47:03',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '1',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-10',
          signTime: '2022-09-10 03:31:50',
          signPlace: '海南省海南省屯昌县屯昌县综合批发市场',
          weed: '7',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-09',
          signTime: '2022-09-09 18:16:46',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '6',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-08',
          signTime: '2022-09-08 13:07:00',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '5',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-07',
          signTime: '2022-09-07 12:11:11',
          signPlace: '海南省海南省屯昌县屯昌县综合批发市场',
          weed: '4',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-06',
          signTime: '2022-09-06 17:46:04',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '3',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-05',
          signTime: '2022-09-05 00:43:37',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '2',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-04',
          signTime: '2022-09-04 00:46:34',
          signPlace: '海南省海南省屯昌县屯昌县综合批发市场',
          weed: '1',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-03',
          signTime: '2022-09-03 13:39:00',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '7',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-02',
          signTime: '2022-09-02 00:50:54',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '6',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
        {
          signDate: '2022-09-01',
          signTime: '2022-09-01 12:04:31',
          signPlace: '海南省海南省屯昌县育新路51号靠近丽雅饭店',
          weed: '5',
          status: '1',
          appVersion: '5.23.1',
          isVersion: null,
        },
      ],
      signInDel: '',
      signInTime: '',
      signInPlace: '',
      isShowsignInDel: false,
      datat: [
        {
          title: '请假次数',
        },
        {
          title: '请假时长',
        },
      ],
      data: [
        {
          title: '应签到人数',
          iconType: 'calendar',
          description: '22',
        },
        {
          title: '应签到天数',
          iconType: 'carry-out',
          description: '22',
        },
        {
          title: '漏签到人数',
          iconType: 'funnel-plot',
          description: '22',
        },
        {
          title: '平均签到率',
          iconType: 'pie-chart',
          description: '22%',
        },
      ]
    }
  },
  created() {},
  mounted() {
    this.calendarValue = '2022/09/20'//moment(dateStr, this.dateFormat);
    let dateStr = '2022-09-29'
    this.isShowsignInDel = true;
    this.SignInData.forEach(item => {
      if (item.signDate === dateStr) {
        if (item.status === "1") {
          this.signInDel = "正常签到";
          this.signInTime = item.signTime;
          this.signInPlace = item.signPlace;
        } else if (item.status === "0") {
          this.signInDel = "未签到";
          this.signInTime = item.signTime;
          this.signInPlace = item.signPlace;
        }
      }
    });
  },
  watch: {},
  methods: {
    handleDrawer() {
      this.$emit('handleDrawer')
    },
    headerRender({ value, type, onChange, onTypeChange }) {
      return ''
    },
    changeDate() {
      this.calendarValue = '2021/05/20'//moment(dateStr, this.dateFormat);
    },
    getListData(value) {
      let listData
      let successContent = '已签到'
      let errorContent = '未签到'
      this.SignInData.forEach((item) => {
        if (item.signDate === value.format('YYYY-MM-DD')) {
          if (item.status === '1') {
            listData = [{ type: 'processing', content: successContent }]
          } else if (item.status === '0') {
            listData = [{ type: 'warning', content: errorContent }]
          }
        }
      })
      return listData || []
    },
    // 日期变化时触发
    rangePickerChange(e) {
      let yearStr = e.format('YYYY')
      let monthStr = e.format('MM')
      let dateStr = e.format('YYYY-MM-DD')
      console.log(dateStr)
      this.isShowsignInDel = true
      this.SignInData.forEach((item) => {
        if (item.signDate === dateStr) {
          if (item.status === '1') {
            this.signInDel = '正常签到'
            this.signInTime = item.signTime
            this.signInPlace = item.signPlace
          } else if (item.status === '0') {
            this.signInDel = '未签到'
            this.signInTime = item.signTime
            this.signInPlace = item.signPlace
          }
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.drawer {
  width: 600px;
  position: absolute;
  right: -12px;
  top: -12px;
  bottom: 0;
  background-color: #fff;
  border-left: 1px #e8e8e8 solid;
  overflow-x: auto;
  .drawer-title {
    background-color: #fff;
    border-bottom: 1px #e8e8e8 solid;
    display: flex;
    padding: 16px 20px;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 16px;
      font-weight: 600;
    }
    .close-icon {
      color: #333;
      font-size: 16px;
    }
  }
  .drawer-body {
    padding: 20px;
    position: relative;
    > h3 {
      padding: 10px 0;
      font-weight: bold;
    }
  }
}

:deep(.ant-list-grid .ant-col > .ant-list-item) {
  display: flex;
}
:deep(.ant-list-split .ant-list-item:last-child) {
  border-bottom: 1px solid #e8e8e8;
}

.con-content-list {
  border: 1px #e8e8e8 solid;
  border-radius: 6px;
  padding: 16px 16px 0 16px;
}

/deep/.ant-fullcalendar-fullscreen {
  .ant-fullcalendar-calendar-body {
    padding: 0;
  }
  .ant-fullcalendar-header .ant-radio-group{
    display: none;
  }
  .ant-fullcalendar-date {
    height: 60px;
  }
  ul {
    padding: 0;
  }
  li::marker {
    content: '';
  }
  .ant-badge-status-text{
    margin-left: 0;
  }
  .ant-fullcalendar-content {
    height: auto;
    text-align: right;
    overflow-y: initial;
  }
}
</style>
